<!DOCTYPE html>
<html>
<head>
<title>Html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->



</head>

<body>
	<button id="btn1" onclick="demo1()">HTML事件处理--直接添加到HTML结构中</button>
	<br />
	<button id="btn2">DOM0级事件处理--把一个函数赋值给一个事件处理程序属性</button>
	<br />
	<button id="btn3">DOM2级事件处理--addEventListener</button>
	<br />
	<button id="btn4">IE事件处理程序--attachEvent、detachEvent</button>
	<script>
		//HTML事件处理
		function demo1() {
			alert("HTML事件处理");
		}

		function demo2() {
			alert("DOM0级事件处理程序一");
		}
		function demo3() {
			alert("DOM0级事件处理程序二");
		}

		function demo4() {
			alert("DOM2级事件处理程序一");
		}
		function demo5() {
			alert("DOM2级事件处理程序二");
		}
		function demo6() {
			alert("DOM2级事件处理程序三");
		}
		//DOM0级事件处理
		var btn2 = document.getElementById("btn2");
		btn2.onclick = demo2;
		//只能调用一个,所以有缺陷
		btn2.onclick = demo3;
		//btn2.onclick = null;

		//DOM02级事件处理
		var btn3 = document.getElementById("btn3");
		btn3.addEventListener("click", demo4);
		btn3.addEventListener("click", demo5);
		btn3.addEventListener("click", demo6);
		btn3.removeEventListener("click", demo5);

		//IE事件处理程序+怎样处理兼容性问题
		var btn4 = document.getElementById("btn4");

		if (btn4.addEventListener) {//如果支持DOM2级事件处理则执行这一行

			btn4.addEventListener("click", demo4);
		} else if (btn4.attachEvent) {//如果不支持则判断如果支持IE事件处理程序则执行这一行
			btn4.addEventListener("onclick", demo1);//注意与上一行的区别
		} else {//都不支持则执行下面的语句
			btn4.onclick = demo1();
		}
	</script>

</body>
</html>
